@include('backstage/public/_header')
    <style>
        .add_tab td span #thume {
            line-height: 100px;
            color: #d94040;
            font-size: 14px;
            text-align: center;
        }
    </style>
    <div class="result_wrap">
        <div class="result_title">
            <div class="mark">
                <p>帶<i class="require">*</i>為必填項</p>
            </div>
        </div>
        <form id="form_data">
            {{csrf_field()}}
            <table class="add_tab">
                <tbody>
                    <tr>
                        <th width="120"><i class="require">*</i>分類：</th>
                        <td>
                            <select name="type_id" id="type_id">
                                <option value="">==請選擇==</option>
                                @foreach ($cate as $v)
                                    <option value="{{$v->id}}">{{$v->type_name}}</option>
                                @endforeach
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th><i class="require">*</i>標題：</th>
                        <td>
                            <input type="text" class="lg" name="title" id="title">
                            <p>標題可以寫30個字</p>
                        </td>
                    </tr>
                    <tr>
                        <th>作者：</th>
                        <td>
                            <input type="text" name="art_writer" >
                            <span><i class="fa fa-exclamation-circle yellow"></i>不填則默認是登六管理員用護名</span>
                        </td>
                    </tr>
                    <tr>
                        <th>文章標識：</th>
                        <td>
                            <input type="text" name="art_keyword" >
                            <span style="color:red;"><i class="fa fa-exclamation-circle yellow"></i>如果是系統文章壹定要填寫</span>
                        </td>
                    </tr>
                    <tr>
                        <th>文章屬性：</th>
                        <td>
                            <label for=""><input type="radio" value="0" name="art_set" checked="checked">普通</label>
                            <label for=""><input type="radio" value="1" name="art_set">跳轉</label>
                        </td>
                    </tr>
                    <tr>
                        <th>跳轉地址：</th>
                        <td>
                            <input type="text" name="art_url" >
                            <span><i class="fa fa-exclamation-circle yellow"></i>僅在文章屬性為跳轉時有效</span>
                        </td>
                    </tr>
                    <tr>
                        <th>縮略圖：</th>
                        <td>
                            <input type="file" name="art_img" id="art_img" style="float: left;margin-top: 40px;">
                            <span style="float:left">

                                <div style="text-align:center; clear:both; overflow:hidden; width:290px; height:100px">
                                    <span id="thume">無縮略圖</span>

                                    <a id="hrefimg"  target="_blank" style="display:none;" href="">

                                        <img id="srcimg" src="" height="100" alt="圖片預覽" />

                                    </a>
                                </div>
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <th>排序：</th>
                        <td>
                            <input type="text" onkeyup="value=value.replace(/[^\d{1,}\-\d{1,}|\d{1,}]/g,'')" name="sort_order" maxlength="3" id="sort_order" placeholder="0">
                            <p>只能是數字</p>
                        </td>
                    </tr>
                    <tr>
                        <th>是否隱藏：</th>
                        <td>
                            <label for=""><input type="radio" value="1" name="is_hidden" checked="checked">是</label>
                            <label for=""><input type="radio" value="0" name="is_hidden">否</label>
                        </td>
                    </tr>
                    <tr>
                        <th>描述：</th>
                        <td>
                            <textarea name="art_info" id="art_info"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <th><i class="require">*</i>內容：</th>
                        <td>
                            <div style="width: 50%;float: left;">
                                <iframe class="lg" id="preview" style="min-width:640px; min-height:360px;margin-top: 10px;" ></iframe>
                                <p style="line-height: 5px;">這裏顯示內容</p>
                            </div>
                            <div style="width: 50%;float: left;">
                                <textarea class="lg" name="art_content" id="art_content" style="min-width:640px; min-height:360px;padding: 1px;"></textarea>
                                <p>這裏修改內容</p>
                            </div>
                        </td>
                    </tr>
                    <!-- <tr>
                        <th></th>
                        <td>
                            <input type="button" value="提交" id="btnSub" onclick="onSubmit();">
                            <input type="button" class="back" onclick="history.go(-1)" value="返回">
                        </td>
                    </tr> -->
                </tbody>
            </table>
            <div class="btn_group">
                <input type="button" value="提交" id="btnSub" onclick="onSubmit();">
                <input type="button" class="back" onclick="history.go(-1)" value="返回">
            </div>
        </form>
        <div class="tips">
            <h3>添加新的文章說明</h3>
            <p>1、帶<i class="require">*</i>為必填項，不允許為空</p>
            <p>2、圖片上傳只允許".png", ".jpg", ".jpeg", ".gif", ".bmp"，文件大小不超過2M</p>
            <p>3、填充文章表，記錄文章id</p>
            <p>4、點擊提交 -&gt; 添加文章，返回-&gt; 可以回到文章列表</p>
        </div>
    </div>
    
    <script type="text/javascript">
        $('#art_content').bind('input propertychange', function(){
            var val = $('#art_content').val();
            $(document.getElementById('preview').contentWindow.document.body).html(val);
        });


        $('#art_img').click(function(){

            document.getElementById('srcimg').src = '';

            document.getElementById('hrefimg').href= '';

            document.getElementById('art_img').value= '';

            $("#hrefimg").hide();

            $("#thume").show();

        });

        $('#art_img').change(function(){

            var f = document.getElementById('art_img').files[0];

            var url = window.URL.createObjectURL(f);

            document.getElementById('srcimg').src = url;

            document.getElementById('hrefimg').href = url;

            if($('#imgfile').val()==""){

                $("#hrefimg").hide();

                $("#thume").show();

            }else{

                $("#hrefimg").show();

                $("#thume").hide();

            }

        });
        var vfTime = 2;
        var timer=null;
        function setTime(){
            vfTime --;
            if(vfTime<=0){
                vfTime = 0;
                clearInterval(timer);
            }
        }

        function onSubmit(){
            var type_id=$("#type_id").val();
            var title = $("#title").val();
            var art_content = $("#art_content").val();
            if (vfTime!=0 && timer!=null){
                layer.msg('操作過於頻繁', {icon: 7,anim: 6});
                // setTimeout(function(){$("#chiContent").focus();}, 1500);
                return false;
            }
            if (type_id==''){
                layer.msg('請選擇文章分類', {icon: 5,anim: 6});
                // setTimeout(function(){$("#chiContent").focus();}, 1500);
                return false;
            }
            if (title=='') {
                layer.msg('主題不能為空', {icon: 5,anim: 6});
                setTimeout(function(){$("#title").focus();},0);
                return false;
            }
            if (art_content=='') {
                layer.msg('活動內容不能為空', {icon: 5,anim: 6});
                setTimeout(function(){$("#art_content").focus();},0);
                return false;
            }
            var form = new FormData(document.getElementById("form_data"));
//             var req = new XMLHttpRequest();
//             req.open("post", "${pageContext.request.contextPath}/public/testupload", false);
//             req.send(form);
            $.ajax({
                url:"{{$doadd}}",
                type:"post",
                data:form,
                processData:false,
                contentType:false,
                dataType : "json",
                success:function(data){
                    if(data.status==1){
                        layer.msg(data.message, {icon: 6});
                        setTimeout(function(){
                            window.location.href=data.jumpUrl;
                        },2000);
                    }else if(data.status==-1){
                        layer.alert(data.message, {icon: 2,anim:6});
                        
                    }else{
                        layer.msg(data.message, {icon: 5});
                    }
                    clearInterval(timer);
                    timer = setInterval(setTime, 1000, "1");
                    
                },
                error:function(e){
                    layer.msg(e, {icon: 5,anim: 6});
                    clearInterval(timer);
                    timer = setInterval(setTime, 1000, "1");
                }
            });
        }
    </script>
@include('backstage/public/_footer')